<template>
    <svg
      class="transparent-polygon"
      :style="{ width: '100%', height: '100%', pointerEvents: 'auto' }"
    >
    <!-- stroke-width="1"为边框宽度，为0看不见边框 -->
      <polygon
        :points="pointString"
        fill="transparent"
        stroke="rgba(255, 0, 0, 1)"
        stroke-width="0"
        @click="handleClick"
        style="cursor: pointer"
      />
    </svg>
  </template>
  
  <script setup lang="ts">
  import { defineProps, defineEmits, computed } from 'vue'
  
  const props = defineProps<{
    points: number[][]
    popupPath: string
    popupName: string
  }>()
  
  const emit = defineEmits<{
    (e: 'openPopup', path: string,name:string): void
  }>()
  
  const pointString = computed(() =>
    props.points.map(p => p.join(',')).join(' ')
  )
  
  const handleClick = () => {
    emit('openPopup', props.popupPath,props.popupName)
  }
  </script>
  
  <style scoped>
  .transparent-polygon {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
  }
  </style>
  